//申请管理的form查询

import React, { Component } from 'react';
import { Form , InputNumber, Input, DatePicker, Select, Row, Col } from 'antd';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

class QueryInfo extends Component {

	handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
	}
	
	handleSearch = () => {
		console.log(1);
	}

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
			<div>  
				<div className="line"></div>
				<div className="per-info">
					<Form layout="inline" onSubmit={this.handleSubmit}>
						<Row>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('phone', {
                    rules: [{ required: true, message: 'Please input your phone!' }],
                  })(
                    <Input placeholder="手机号" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}								
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('name', {
                    rules: [{ required: true, message: 'Please input your name!' }],
                  })(
                    <Input placeholder="姓名" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}									
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('minDays', {
                    rules: [{ required: true, message: 'Please input your minDays!' }],
                  })(
                    <InputNumber placeholder="最小借款次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}									
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('maxDays', {
                    rules: [{ required: true, message: 'Please input your maxDays!' }],
                  })(
                    <InputNumber placeholder="最大借款次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}									
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('minApply', {
                    rules: [{ required: true, message: 'Please input your minApply!' }],
                  })(
                    <InputNumber placeholder="最小申请次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}									
								</FormItem>
							</Col>
							<Col span={3}>
								<FormItem>
									{getFieldDecorator('maxApply', {
                    rules: [{ required: true, message: 'Please input your maxApply!' }],
                  })(
                    <InputNumber placeholder="最大申请次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '190px' }} />
                  )}									
								</FormItem>
							</Col>
							<Col span={6}>
								<FormItem>
									{getFieldDecorator('range-picker', rangeConfig)(
											<RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '405px' }} />
									)}
								</FormItem>
							</Col>
							</Row>
							<Row>
								<Col span={6}>
									<FormItem>
									{getFieldDecorator('sq-picker', rangeConfig)(
											<RangePicker style={{ color: 'rgba(0,0,0,.25)', width: '395px' }} />
									)}
									</FormItem>
								</Col>
								<Col span={3}>
									<FormItem>
										{getFieldDecorator('checkStatus', {
											rules: [{ required: true, message: 'Please input your checkStatus!' }],
										})(
											<Select placeholder="审核状态" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }}>
												<Select.Option value="waitMachine">待机审</Select.Option>
												<Select.Option value="machineQuerying">机审中</Select.Option>
												<Select.Option value="waitPeople">待人审</Select.Option>
												<Select.Option value="peopleQuerying">审核中</Select.Option>
												<Select.Option value="queried">已审核</Select.Option>
											</Select>
										)}										
									</FormItem>
								</Col>
								<Col span={3}>
									<FormItem>
										{getFieldDecorator('checkResult', {
											rules: [{ required: true, message: 'Please input your checkResult!' }],
										})(
											<Select placeholder="审核结果" style={{ color: 'rgba(0,0,0,.25)', width: '190px' }}>
												<Select.Option value="querySuccess">审核通过</Select.Option>
												<Select.Option value="queryFalse">审核拒绝</Select.Option>
											</Select>
										)}										
									</FormItem>
								</Col>
								<Col span={4}>
									<FormItem>
										{getFieldDecorator('auditor', {
											rules: [{ required: true, message: 'Please input your auditor!' }],
										})(
											<Select placeholder="审核专员" style={{ color: 'rgba(0,0,0,.25)', width: '267px' }}>
												<Select.Option value="lq">李强</Select.Option>
												<Select.Option value="wm">王梅</Select.Option>
											</Select>
										)}									
									</FormItem>
								</Col>
								<Col span={4}>
									<FormItem>
										{getFieldDecorator('MOcommissioner', {
											rules: [{ required: true, message: 'Please input your MOcommissioner!' }],
										})(
											<Select placeholder="MO专员" style={{ color: 'rgba(0,0,0,.25)', width: '267px' }}>
												<Select.Option value="yh">尹浩</Select.Option>
												<Select.Option value="xj">徐静</Select.Option>
											</Select>
										)}										
									</FormItem>
								</Col>
								<Col span={4}>
									<FormItem>
										{getFieldDecorator('tg', {
											rules: [{ required: true, message: 'Please input your tg!' }],
										})(
											<Select placeholder="推广来源" style={{ color: 'rgba(0,0,0,.25)', width: '268px' }}>
												<Select.Option value="q1">渠道01</Select.Option>
												<Select.Option value="q2">渠道02</Select.Option>
											</Select>
										)}										
									</FormItem>
								</Col>
							</Row>
					</Form>
				</div>
			</div>      
		);
	}
}
    
const allForm = Form.create()(QueryInfo);
    
export default allForm;